import React, { FC, useEffect, useState } from "react"
import { Select, Button } from "antd"
const { Option } = Select
import styles from "./index.less"
import DepartmentCard from "./components/DepartmentCard"

interface LeftBarPro {
  collapsed: boolean
}

const leftBar: FC<LeftBarPro> = ({ collapsed }) => {

  useEffect(() => {

  }, [])

  const [departmentList, setDepartmentList] = useState<Array<any>>([{
    value: "",
    label: "全部科室"
  }, {
    value: "000",
    label: "体检科"
  }, {
    value: "999",
    label: "急诊科"
  }, {
    value: "111",
    label: "内科"
  }, {
    value: "222",
    label: "外科"
  }, {
    value: "223",
    label: "骨科"
  }, {
    value: "333",
    label: "针灸科"
  }])

  const [cardList, setCarList] = useState<Array<any>>([
    {
      id: 1,
      datetime: "2020-12-15",
      deptCode: "223",
      deptName: "骨科",
      diagCode: "GZ0932",
      diagName: "腿部骨头骨折",
      mainDiagName: "腿部骨头骨折",
      name: "门诊",
      type: 1,
      dec: "第五次就诊"
    },
    {
      id: 2,
      datetime: "2020-12-15",
      deptCode: "223",
      deptName: "骨科",
      diagCode: "GZ0932",
      diagName: "腿部骨头骨折",
      mainDiagName: "腿部骨头骨折",
      name: "住院",
      type: 2,
      dec: "第五次就诊"
    },
    {
      id: 3,
      datetime: "2020-12-15",
      deptCode: "223",
      deptName: "骨科",
      diagCode: "GZ0932",
      diagName: "腿部骨头骨折",
      mainDiagName: "腿部骨头骨折",
      name: "急诊",
      type: 3,
      dec: "第五次就诊"
    },
    {
      id: 4,
      datetime: "2020-12-15",
      deptCode: "223",
      deptName: "骨科",
      diagCode: "GZ0932",
      diagName: "腿部骨头骨折",
      mainDiagName: "腿部骨头骨折",
      name: "体验",
      type: 4,
      dec: "第五次就诊"
    },
    {
      id: 5,
      datetime: "2020-12-15",
      deptCode: "223",
      deptName: "骨科",
      diagCode: "GZ0932",
      diagName: "腿部骨头骨折",
      mainDiagName: "腿部骨头骨折",
      name: "住院",
      type: 2,
      dec: "第五次就诊"
    },
    {
      id: 6,
      datetime: "2020-12-15",
      deptCode: "223",
      deptName: "骨科",
      diagCode: "GZ0932",
      diagName: "腿部骨头骨折",
      mainDiagName: "腿部骨头骨折",
      name: "急诊",
      type: 3,
      dec: "第五次就诊"
    },
    {
      id: 7,
      datetime: "2020-12-15",
      deptCode: "223",
      deptName: "骨科",
      diagCode: "GZ0932",
      diagName: "腿部骨头骨折",
      mainDiagName: "腿部骨头骨折",
      name: "体验",
      type: 4,
      dec: "第五次就诊"
    }
  ])

  const handleChange = (e: any) => {
    console.log(e)
  }

  /**
   * 20210427
   * 科室选择
   */
  const departmentRend = () => {
    if (departmentList && departmentList.length > 0) {
      return (
        <Select className={styles.departmentSelectBox} defaultValue={departmentList[0].value} onChange={handleChange}>
          {
            departmentList.map(item => {
              return (
                <Option key={item.value} className={styles.departmentS} value={item.value} item={item}>{item.label}</Option>
              )
            })
          }
        </Select>
      )
    }
  }

  return (
    <div className={styles.leftBar}>
      <div className={styles.optionBox}>
        {departmentRend()}
        {collapsed ? <Button className={styles.resetBtn}>重置</Button> : ""}
      </div>
      <div className={styles.cardBox}>
        <div className={styles.cardList}>
          {
            cardList.map(item => {
              return (
                <DepartmentCard key={item.id} item={item} collapsed={collapsed} />
              )
            })
          }

        </div>
      </div>
    </div>
  )
}

export default leftBar